<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>

        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
    </head>
    <body>
        <section>
            <h2>post 请求 登录demo</h2>
            <input id="user-name" type="text" placeholder="输入用户名" /> <button id="post-user">login</button>
        </section>

        <section>
            <h2>get 请求</h2>
            <button id="get-btn">get data</button>
        </section>

        <section>
            <h2>请求数据库</h2>
            <button id="get-goods">get goods</button>
        </section>

        <section>
            <h2>单文件上传</h2>
            <input type="file" id="file" /> <button id="upload">upload</button>
        </section>

        <script>
            const axiosIns = axios.create({
                baseURL: "http://localhost:8888",
                timeout: 1000,
                headers: {
                    "Access-Control-Allow-Origin": "*"
                }
            })

            $("#get-btn").click(function() {
                console.log("clicked")
                axiosIns.get("/user/info", { params: { id: "12015" } })
            })

            $("#get-goods").click(function() {
                axiosIns.get("/get-goods")
            })

            $("#post-user").click(function() {
                const val = $("#user-name").val()
                console.log("name", val)
                if (val) {
                    axiosIns.post("/user/login", { name: val })
                }
            })

            $("#upload").click(function() {
                const file = $("#file").get(0).files[0]
                if (!file) {
                    return
                }
                const form = new FormData()
                form.append("image", file)
                axiosIns.post("/upload", form, { headers: { "Content-Type": "multipart/form-data" } })
            })
        </script>
    </body>
</html>
